ant

2024-07-06 02:55| 来源: 网络整理| 查看: 265

结果如图：

区域，成功率，清单率为表头，右侧为动态的数据

废话不多说直接上代码：

1.先声明表格，使用框架自带a-table，核心点就在data和columns上

2. 设置表头columns：

//mock 数据之后这个数据要来自后台 tableData: [ { area: '上海', success: '86', detail: '85' }, { area: '浙江', success: '85', detail: '90' }, { area: '内蒙古', success: '65', detail: '90' }, { area: '北京', success: '35', detail: '70' }], //转换表头的一个方法 getHeaders () { let data = this.tableData.reduce((pre, cur, index) => pre.concat({ 'dataIndex': `value${index}` }), [{ 'dataIndex': 'title' }]) console.log('headers===>', data) this.areaHeader = data },

然后绑定数据即可：

//左侧定义好的表头 headers: [ { prop: 'area', label: '区域' }, { prop: 'success', label: '成功率(%)' }, { prop: 'detail', label: '清单率(%)' } ], getValues () { let data = this.headers.map(item => { return this.tableData.reduce((pre, cur, index) => Object.assign(pre, { ['value' + index]: cur[item.prop] }), { 'title': item.label }) }) console.log('value===>', data) return data },

【本文地址】

公司简介

联系我们